import { Button, Flex, Form, Input, message, Select, TimePicker, Upload, type FormProps, type SelectProps, type TimePickerProps, type UploadFile, type UploadProps } from "antd"
import { storesAdd, storeservicesList, storesGet } from "../apis/stores";
import { useEffect, useState } from "react";
import RichTextEditor from "../utils/RichTextEditor";
import '../assets/css/stores/storesAdd.css'
import UploadImg from "../utils/UploadImg";
import type { Image, storesAddParamas } from "../type/stores"
import { useNavigate, useParams } from "react-router";
import moment from 'moment';
import { UploadOutlined } from "@ant-design/icons";

type FieldType = {
    name: string;
    tel: string;
    logo: string;
    address: string;
    startTime: string;
    endTime: string;
    services: string;
    username: string;
    intro: string;
    images: Image;
};


function StoresAdd() {
    const format = 'HH:mm';
    const [options, setOptions] = useState<SelectProps['options']>([]);
    const [form] = Form.useForm();
    const [logo, setLogo] = useState<string | undefined>();
    let { id } = useParams();
    let navigate = useNavigate();
    useEffect(() => {
        storeservicesListApi()
        if (Number(id) !== 0) {
            storesGetApi()
        }
    }, [])
    const uploadHandle = (url: string) => {

        form.setFieldValue("logo", url);

    }
    const onFinish: FormProps<storesAddParamas>['onFinish'] = async (values) => {
        let time = values.startTime as any
        let services = values.services as string[]
        let servicesVal = services.join(',')
        values = { ...values, endTime: time[1].format('HH:mm'), startTime: time[0].format('HH:mm'), services: servicesVal };
        let res = await storesAdd(values)
        if (res.errCode == 10000) {
            message.success(id !== '0' ? '修改成功' : '添加成功')
            navigate('/home/stores')
        }

    };
    // 服务范围列表
    let storeservicesListApi = async () => {

        let res = await storeservicesList()
        let scopeServices = []
        for (let i = 0; i < res.data.list.length; i++) {
            scopeServices.push({
                label: res.data.list[i].name,
                value: res.data.list[i].name,
            });
        }
        setOptions(scopeServices)

    }
    useEffect(() => {
        console.log(logo);
    }, [logo])
    const storesGetApi = async () => {
        let res = await storesGet(Number(id))
        let endTime = moment(res.data.endTime, 'HH:mm')
        let startTime = [moment(res.data.startTime, 'HH:mm'), endTime]
        setLogo(res.data.logo)
        form.setFieldsValue({ ...res.data, startTime })
    }
    const handleChange = (value: string[]) => {
        console.log(`selected ${value}`);
    };

    // const fileList = useState<UploadFile[]>([

    // ]);

    // const onChange: UploadProps['onChange'] = (info) => {


    //     // if (info.file.status === 'uploading') {
    //     //     setLoading(true);
    //     //     return;
    //     // }
    //     if (info.file.status === 'done') {

    //         console.log("1111111", info.file.response.data);
    //         form.setFieldValue('images', info.file.response.data)
    //         // setLoading(false);

    //         // setImageUrl(info.file.response.data);
    //         // uploadHandle(info.file.response.data);


    //     }
    // };

    return (
        <div className='StoresAdd' style={{ width: '100%' }}>
            <h4>添加门店</h4>
            <Form
                name="basic"
                style={{ width: '100%', paddingBottom: '50px' }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                form={form}
                autoComplete="off"
            >
                <Form.Item<FieldType>
                    label="店名"
                    name="name"
                    style={{ width: '600px' }}
                    rules={[{ required: true, message: '请输入店名!' }]}
                >
                    <Input style={{ width: '300px' }} placeholder="请输入店名" />
                </Form.Item>

                <Form.Item<FieldType>
                    label="营业时间"
                    name="startTime"
                    style={{ width: '600px' }}
                    rules={[{ required: true, message: '请选择营业时间!' }]}
                >
                    <TimePicker.RangePicker format={format} style={{ width: '200px' }} />
                </Form.Item>
                <Form.Item
                    label="服务范围"
                    name="services"
                    style={{ width: '600px' }}
                    rules={[{ required: true, message: '请选择服务范围!' }]}>
                    <Select
                        mode="multiple"
                        allowClear
                        style={{ width: '300px' }}
                        placeholder="请选择"
                        onChange={handleChange}
                        options={options}
                    />
                </Form.Item>
                <Form.Item<FieldType>
                    label="店主"
                    name="username"
                    style={{ width: '600px' }}
                >
                    <Input style={{ width: '300px' }} placeholder="请输入店主姓名" />
                </Form.Item>
                <Form.Item<FieldType>
                    label="联系电话"
                    name="tel"
                    style={{ width: '600px' }}
                >
                    <Input style={{ width: '300px' }} placeholder="请输入联系电话" />
                </Form.Item>
                <Form.Item<FieldType>
                    label="门店介绍"
                    name="intro"
                    style={{ width: '900px' }}
                >
                    <RichTextEditor
                    />
                </Form.Item>
                <Form.Item<FieldType>
                    label="门店地址"
                    name="address"
                    style={{ width: '600px' }}
                    rules={[{ required: true, message: '请输入门店地址!' }]}
                >
                    <Input style={{ width: '300px' }} placeholder="请输入店主姓名" />
                </Form.Item>
                <Form.Item<FieldType>
                    label="门店logo"
                    name="logo"
                    style={{ width: '600px' }}
                >
                    {logo}
                    <UploadImg uploadHandle={uploadHandle} defaultImgUrl={logo} />
                </Form.Item>
                {/* <Form.Item<FieldType>
                    label="门店图片"
                    name="images"
                    style={{ width: '600px' }}
                >
                    <Upload
                        action={import.meta.env.VITE_API_BASE_URL + '/upload/add'}
                        listType="picture"
                        data={{ file: 'file' }}
                        onChange={onChange}
                        headers={{ 'Authorization': localStorage.getItem('token')! }}
                        fileList={fileList}>
                        <Button icon={<UploadOutlined />}>
                            上传图片
                        </Button>
                    </Upload>
                </Form.Item> */}

                <Form.Item label={null}>
                    <Flex style={{ marginLeft: '180px' }}>
                        <Button type="primary" htmlType="submit" style={{ width: '100px', marginRight: '20px' }}>
                            确定
                        </Button>
                        <Button style={{ width: '100px' }}>
                            取消
                        </Button>
                    </Flex>

                </Form.Item>
            </Form>
        </div >
    )
}
export default StoresAdd